<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>淘抢购</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .clearfix:before,
        .clearfix:after{
            clear: both;
            display: block;
            content: "";
        }
        button{
            float: right;
            margin-right: 80px;
            background: none;
            border:none;
            outline:none;
            margin-top: 20px;
        }
        button:hover{
            color: #888888;
        }
        .container{
            width: 1200px;
            margin: 100px auto;
            background: #f4f4f4;
        }
        #list div{
            float: left;
            width: 375px;
            padding-left: 20px;
            padding-bottom: 20px;
            padding-top: 20px;
        }
        #list div .title,#list div p{
            display: table;
        }
        #list div .title{
            font-size: 16px;
            padding-top: 15px;
            display: block;
            cursor: pointer;
        }
        #list div .title:hover{
            color: #ff5000;
        }
        #list div img{
            float: left;
            padding-right: 14px;
        }
        .p1{
            color: #999999;
            font-size: 12px;
            padding-top: 24px;
        }
        .price,.price1{
            font-size: 12px;
            color: #fe3338;
        }
        .price{
            padding-right: 89px;
        }
        .jiage,.jiage1{
            padding-top: 17px;
            display: inline-block;
        }
        .jiage{
            color: #ff5000;
            font-size: 12px;
        }
        .jiage2{
            color: #ff5000;
            font-size: 18px;
        }
        .jiage1{
            text-decoration: line-through;
            color: #999999;
            font-size: 14px;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <button id="btn">换一换</button>
    <div id="list" class="clearfix"></div>
</div>
<script>

    //初始值
    var page = 1;

    //给换一换加点击事件
    document.querySelector("#btn").addEventListener("click",function () {
        //让page加1
        page++;
        //解决追加问题
        document.querySelector("#list").innerHTML = "";
        //执行ajax方法
        loadXMLDoc();
    });


    //获取json 数据用的ajax方法
    function loadXMLDoc() {
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                var json = xmlhttp.responseText;
                //把获取到的数据，转成数组对象格式的，方便js操作
                json = JSON.parse(json);
                //console.log(json.shop);
                for (let i=0 ;i<json.shop.length;i++){
                    console.log(json.shop[i]);
                    //创建节点
                    var img = document.createElement("img");
                    img.src = json.shop[i].pic;
                    //创建span节点
                    var title = document.createElement("span");
                    title.innerHTML = json.shop[i].title;
                    title.classList = "title";


                    //创建p1节点
                    var p1 = document.createElement("p");
                    p1.innerHTML = json.shop[i].p1;
                    p1.classList = "p1";

                    //创建jiage节点
                    var jiage = document.createElement("span");
                    jiage.innerHTML = json.shop[i].jiage;
                    jiage.classList = "jiage";

                    //创建jiage2节点
                    var jiage2 = document.createElement("span");
                    jiage2.innerHTML = json.shop[i].jiage2;
                    jiage2.classList = "jiage2";

                    //创建jiage1节点
                    var jiage1 = document.createElement("span");
                    jiage1.innerHTML = json.shop[i].jiage1;
                    jiage1.classList = "jiage1";

                    //创建price节点
                    var price = document.createElement("span");
                    price.innerHTML = json.shop[i].price;
                    price.classList = "price";


                    //创建price1节点
                    var price1 = document.createElement("span");
                    price1.innerHTML = json.shop[i].price1;
                    price1.classList = "price1";

                    //创建div节点
                    var div = document.createElement("div");

                    //向div标签追加3个子标签
                    div.appendChild(img);
                    div.appendChild(title);
                    div.appendChild(p1);
                    div.appendChild(price);
                    div.appendChild(price1);
                    div.appendChild(jiage);
                    div.appendChild(jiage2);
                    div.appendChild(jiage1);
                    console.log(div);

                    //把3个div标签追加到最大的div#list标签
                    document.querySelector("#list").appendChild(div)
                }

            }
        }

        if (page>4){
            page=1
        }
        xmlhttp.open("GET",page+".json",true);
        xmlhttp.send();
    }
    //先执行一遍
    loadXMLDoc();
</script>
</body>
</html>